<template>
	<view class="m-approvalShowByDeal">
		<!-- 审批流程显示 -->
		<view>
			<view v-if="status === 0">
				<view class="part" v-for="(approvalRow,keyIndex) in approvalList" :key="keyIndex"
					style="margin-bottom: 10px;">
					<view class="pf">
						<view class="label">流程</view>
						<view class="pd">
							<view>
								<view class="flex-box f-r">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text>{{ approvalRow.approvalNodeList[0].node[0].Creater }}</text>
														<image style="width: 14px; height: 14px;margin-right: 4px;"
															class="sf" :src="imageForm.success" />
													</view>
												</view>
											</view>
											<view class="line-li1"></view>
										</view>
									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<text>发起审批</text>
												<text
													class="ap-d">{{ approvalRow.approvalNodeList[0].node[0].CreateTime.split('.')[0].replace(/T/g, '') }}</text>
											</view>
											<view class="f-sub">
												{{ approvalRow.approvalNodeList[0].node[0].Creater }}
											</view>
										</view>
										<view class="pl"></view>
									</view>
								</view>
							</view>
							<view v-for="(row, index) in approvalRow.approvalNodeList" :key="index">
								<view class="flex-box f-r" v-if="row.node[0].ApprovalSort !== 0">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text
															v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length === 1 && row.type === 0">
															{{ row.node[0].CurrentApprovalIDs[0] }}
														</text>

														<uni-icons v-else-if="row.type === 1" type="sound" size="28"
															color="#fff" style="padding-top: 7px;" />

														<uni-icons v-else type="staff" size="28" color="#fff"
															style="padding-top: 7px;" />

														<image style="width: 14px; height: 14px;margin-right: 4px;"
															class="sf"
															v-if="approvalRow.level === row.index - 2 && row.type === 1 && row.node[0].Approve !== 0"
															:src="imageForm.success" />
														<image style="width: 14px; height: 14px;margin-right: 4px;"
															class="sf" v-if="approvalRow.level >= row.index - 1"
															:src="getApprovalTagImg(row)" />
													</view>
												</view>
											</view>
											<view class="line-li1"
												v-if="index !== approvalRow.approvalNodeList.length - 1" />
										</view>
									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<view class="x-bc">
													<view class="x-f">
														<text style="vertical-align: middle;"
															v-if="row.type === 1">抄送人</text>
														<text style="vertical-align: middle;" v-else>
															{{ row.department ? row.department : '审批人' }}
														</text>
														<view>
															<u-icon name="more-circle-fill" color="#afd6ff" size="20"
																@click="showMore(row)"
																style="vertical-align: middle;padding-left: 5px;" />
														</view>
													</view>

													<text class="ap-d"
														v-if="approvalRow.level === row.index - 2 && row.type === 1 && row.node[0].Approve !== 0">
														{{ row.node[0].ApproveTime }}
													</text>
													<text class="ap-d" v-if="approvalRow.level >= row.index - 1">
														{{ row.node[0].ApproveTime }}
													</text>
												</view>

												<view class="f-sub" v-if="row.showMore">
													<text
														v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length === 1">
														{{ row.node[0].CurrentApprovalIDs[0] }}
													</text>
													<text
														v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length > 1 && row.type === 0">
														{{ row.node[0].CurrentApprovalIDs.length }}人或签
													</text>
													<text v-if="row.node.length > 1 && row.type === 0">
														{{ row.node.length }}人会签
													</text>
													<text
														v-if="row.node.length > 1 && !checkIsSingle(row) && row.type === 0">
														多人审核
													</text>
													<text
														v-if="approvalRow.level === row.index - 2 && row.type === 1 && row.node[0].Approve !== 0">
														（已抄送）
													</text>
													<text v-if="approvalRow.level >= row.index - 1">
														（{{ getApprovalText(row) }}）
													</text>
												</view>
											</view>
											<view class="hq" v-if="row.showMore">
												<!-- 或签 -->
												<view class="wh"
													v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length > 1">
													<view class="dis2-ib"
														v-for="(item, itemIndex) in row.node[0].CurrentApprovalIDs"
														:key="itemIndex">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item) }}</text>
																<image
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	class="sf"
																	v-if="item === row.node[0].Approver && approvalRow.level >= row.index - 1 && row.node[0].Approve !== 0"
																	:src="row.node[0].Approve === 1 ? imageForm.success : imageForm.fail" />
															</view>
															<view class="ap-n">{{ item }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex !== row.node[0].CurrentApprovalIDs.length - 1 && row.type === 0">
															/
														</view>
														<view class="dis3-ib" v-if="row.type === 1"> </view>
													</view>
												</view>
												<!-- 会签 -->
												<view class="wh" v-if="row.node.length > 1 && checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node"
														:key="itemIndex">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item.CurrentApprovalIDs[0]) }}</text>
																<image
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	class="sf"
																	v-if="item.Approver && item.Approver === item.CurrentApprovalIDs[0] && approvalRow.level >= row.index - 1 && item.Approve !== 0"
																	:src="item.Approve === 1 ? imageForm.success : imageForm.fail" />
															</view>
															<view class="ap-n">{{ item.CurrentApprovalIDs[0] }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex !== row.node.length - 1 && row.type === 0">
															+
														</view>
													</view>
												</view>
												<!-- 多人审核 -->
												<view class="wh" v-if="row.node.length > 1 && !checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node"
														:key="itemIndex">
														<view class="dis2-ib"
															v-for="(detail, detailIndex) in item.CurrentApprovalIDs"
															:key="detailIndex">
															<view class="dis-ib">
																<view class="img">
																	<text>{{ cutStr(detail) }}</text>
																</view>
																<view class="ap-n">{{ detail }}</view>
															</view>
															<view class="dis3-ib"
																v-if="itemIndex !== row.node.length - 1">
																/
															</view>
														</view>
													</view>
												</view>
											</view>
											<view class="pl">
												<view class="plpd" v-for="item in row.node" :key="item.ApprovalSort">
													<view>
														<text v-if="item.ApprovalContent" :class="'ac-' + item.Approve">
															{{ item.Approver }}:
														</text>
														<text v-if="item.ApprovalContent" :class="'ac-' + item.Approve">
															"{{ item.ApprovalContent }}"
														</text>
													</view>

													<view class="piccontent" v-if="item.Imgs">
														<view class="van-uploader">
															<view class="van-uploader__wrapper x-f"
																style="flex-wrap: wrap;">
																<view class="van-uploader__preview"
																	v-for="(imgItem, imgItemIndex) in (item.Imgs ? item.Imgs.split(',') : [])"
																	:key="imgItemIndex">
																	<view class="van-image van-uploader__preview-image"
																		style="overflow: hidden; border-radius: 4px;width:60px;height:60px;"
																		@click="previewItemImage(item.Imgs, imgItemIndex)">
																		<image
																			style="width: 40px; height: 40px;margin-right: 4px;object-fit: cover;"
																			:src="processImageUrl(imgItem)"
																			class="van-image__img" />
																	</view>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="(status === 1 || status === 2) && !approvalAgain">
				<view class="part" v-for="approvalRow in approvalList" :key="approvalRow.level">
					<view class="pf">
						<view class="label">流程</view>
						<view class="pd">
							<view>
								<view class="flex-box f-r">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text>{{ approvalRow.approvalNodeList[0].node[0].Creater}}</text>
														<image class="sf"
															style="width: 14px; height: 14px;margin-right: 4px;"
															:src="imageForm.success" />
													</view>
												</view>
											</view>
											<view class="line-li1"></view>
										</view>
									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<text>发起审批</text>
												<text
													class="ap-d">{{approvalRow.approvalNodeList[0].node[0].CreateTime.split('.')[0].replace(/T/g,'')}}</text>
											</view>
											<view class="f-sub">
												{{ approvalRow.approvalNodeList[0].node[0].Creater }}
											</view>
										</view>
										<view class="pl"></view>
									</view>
								</view>
							</view>
							<view v-for="(row, index) in approvalRow.approvalNodeList" :key="index">
								<view class="flex-box f-r" v-if="row.node[0].ApprovalSort!==0">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text
															v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length === 1 && row.type === 0">
															{{ row.node[0].CurrentApprovalIDs[0] }}
														</text>

														<uni-icons v-else-if="row.type === 1" type="sound" size="28"
															color="#fff" style="padding-top: 7px;" />

														<uni-icons v-else type="staff" size="28" color="#fff"
															style="padding-top: 7px;" />

														<image class="sf"
															style="width: 14px; height: 14px;margin-right: 4px;"
															v-if="approvalRow.level === row.index - 2 && row.type === 1 && row.node[0].Approve !== 0"
															:src="imageForm.success" />
														<image class="sf"
															style="width: 14px; height: 14px;margin-right: 4px;"
															v-if="approvalRow.level >= row.index - 1"
															:src="getApprovalTagImg(row)" />
													</view>
												</view>
											</view>
											<view class="line-li1"
												v-if="index !== approvalRow.approvalNodeList.length - 1" />
										</view>
									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<view class="x-bc">
													<view class="x-f">
														<text style="vertical-align: middle;"
															v-if="row.type === 1">抄送人</text>
														<text style="vertical-align: middle;" v-else>
															{{ row.department ? row.department : '审批人' }}
														</text>
														<view>
															<u-icon name="more-circle-fill" color="#afd6ff" size="20"
																@click="showMore(row)"
																style="vertical-align: middle;padding-left: 5px;" />
														</view>
													</view>
													<text class="ap-d"
														v-if="approvalRow.level === row.index - 2 && row.type === 1 && row.node[0].Approve !== 0">
														{{ row.node[0].ApproveTime }}
													</text>
													<text class="ap-d" v-if="approvalRow.level >= row.index - 1">
														{{ row.node[0].ApproveTime }}
													</text>
												</view>
												<view class="f-sub" v-if="row.showMore">
													<text
														v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length === 1">
														{{ row.node[0].CurrentApprovalIDs[0] }}
													</text>
													<text
														v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length > 1 && row.type === 0">
														{{ row.node[0].CurrentApprovalIDs.length }}人或签
													</text>
													<text v-if="row.node.length > 1 && row.type === 0">
														{{ row.node.length }}人会签
													</text>
													<text
														v-if="row.node.length > 1 && !checkIsSingle(row) && row.type === 0">
														多人审核
													</text>
													<text
														v-if="approvalRow.level === row.index - 2 && row.type === 1 && row.node[0].Approve !== 0">
														（已抄送）
													</text>
													<text v-if="approvalRow.level >= row.index - 1">
														（{{ getApprovalText(row) }}）
													</text>
												</view>
											</view>
											<view class="hq" v-if="row.showMore">
												<!-- 或签 -->
												<view class="wh"
													v-if="row.node.length === 1 && row.node[0].CurrentApprovalIDs.length > 1">
													<view class="dis2-ib"
														v-for="(item, itemIndex) in row.node[0].CurrentApprovalIDs"
														:key="itemIndex">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item) }}</text>
																<image class="sf"
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	v-if="item === row.node[0].Approver && approvalRow.level >= row.index - 1 && row.node[0].Approve !== 0"
																	:src="row.node[0].Approve === 1 ? imageForm.success : imageForm.fail" />
															</view>
															<view class="ap-n">{{ item }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex !== row.node[0].CurrentApprovalIDs.length - 1 && row.type === 0">
															/
														</view>
													</view>
												</view>
												<!-- 会签 -->
												<view class="wh" v-if="row.node.length > 1 && checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node"
														:key="itemIndex">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item.CurrentApprovalIDs[0]) }}</text>
																<image class="sf"
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	v-if="item.Approver && item.Approver === item.CurrentApprovalIDs[0] && approvalRow.level >= row.index - 1 && item.Approve !== 0"
																	:src="item.Approve === 1 ? imageForm.success : imageForm.fail" />
															</view>
															<view class="ap-n">{{ item.CurrentApprovalIDs[0] }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex !== row.node.length - 1 && (row.type === 0 || row.type === 1)">
															+
														</view>
													</view>
												</view>
												<!-- 多人审核 -->
												<view class="wh" v-if="row.node.length > 1 && !checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node"
														:key="itemIndex">
														<view class="dis2-ib"
															v-for="(detail, detailIndex) in item.CurrentApprovalIDs"
															:key="detailIndex">
															<view class="dis-ib">
																<view class="img">
																	<text>{{ cutStr(detail) }}</text>
																</view>
																<view class="ap-n">{{ detail }}</view>
															</view>
															<view class="dis3-ib"
																v-if="itemIndex !== row.node.length - 1">
																/
															</view>
														</view>
													</view>
												</view>
											</view>
											<view class="pl">
												<view class="plpd" v-for="item in row.node" :key="item.ApprovalSort">
													<view>
														<text v-if="item.ApprovalContent" :class="'ac-' + item.Approve">
															{{ item.Approver }}:
														</text>
														<text v-if="item.ApprovalContent" :class="'ac-' + item.Approve">
															"{{ item.ApprovalContent }}"
														</text>
													</view>

													<view class="piccontent" v-if="item.Imgs">
														<view class="van-uploader">
															<view class="van-uploader__wrapper x-f">
																<view class="van-uploader__preview"
																	v-for="(imgItem, imgItemIndex) in (item.Imgs ? item.Imgs.split(',') : [])"
																	:key="imgItemIndex">
																	<view class="van-image van-uploader__preview-image"
																		style="overflow: hidden; border-radius: 4px;width:60px;height:60px;"
																		@click="previewItemImage(item.Imgs, imgItemIndex)">
																		<image :src="processImageUrl(imgItem)"
																			class="van-image__img"
																			style="width: 40px; height: 40px;margin-right: 4px;object-fit: cover;" />
																	</view>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, computed } from 'vue';
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useInventoryStore, useUserStore, usePermissionStore } from '@/store';
	const inventoryStore = useInventoryStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();

	// 定义类型接口
	interface Option {
		keyName : string;
		keyValue : string;
		Status : number;
		globalData ?: {
			physicalTableName : string;
		};
	}

	interface Person {
		UserID : string;
		UserName : string;
		EmplName : string;
	}

	interface ApprovalNode {
		ApprovalSort : number;
		CurrentApprovalIDs : string[];
		Approve : number;
		Approver : string;
		ApproveTime : string;
		ApprovalContent : string;
		Imgs : string;
		[key : string] : any;
	}

	interface ApprovalRowNode {
		index : number;
		type : number;
		department ?: string;
		node : ApprovalNode[];
		showMore ?: boolean;
		[key : string] : any;
	}

	interface ApprovalListRow {
		level : number;
		approvalNodeList : ApprovalRowNode[];
	}

	// 组件参数
	const props = defineProps<{
		option : Option;
	}>();

	// 响应式数据
	const showLoading = ref(false);
	const ifConfirm = ref(false);
	const showButton = ref(0);
	const isSubmit = ref(false);
	const personList = ref<Person[]>([]);
	const approvalAgain = ref(false);
	const approvalActions = ref([]);
	const selectApprovalData = ref('');
	const approvalList = ref<ApprovalListRow[]>([]);
	const approvalProcessList = ref([]);
	const status = ref(-1);
	const creater = ref('');
	const createTime = ref('');
	const approvalID = ref(0);
	const approveStr = ref('');
	const level = ref(0);
	const finalResult = ref(0);

	const form = reactive({
		id: 0,
		EmplName: '',
		C_Date: '',
		C_VarA: '',
		B_Date: '',
		C_VarE: '',
		C_VarB: '',
		C_Why: ''
	});

	const editRemark = ref(true);
	const approveMsg = ref('');
	const uploader = ref([]);


	const imageForm = computed(() => {
		return {
			'success': "/uni_modules/mc-ui/static/image/success.png",
			'fail': "/uni_modules/mc-ui/static/image/fail.png",
			'doing': "/uni_modules/mc-ui/static/image/doing.png"
		}
	});
	console.log(imageForm.value);

	// 方法定义
	const processImageUrl = (url : string) => {
		if (!url) return '';
		url = url.trim();

		const urlRegular = (value : string) => /^((https|http|ftp|rtsp|mms):\/\/)/.test(value);

		return urlRegular(url) ? url : `${mainStore.appConfigInfo.IPAgreement}${mainStore.appConfigInfo.serverIP}${url}`;
	};

	const showMore = (row : ApprovalRowNode) => {
		row.showMore = !row.showMore;
	};

	const getApprovalProcess = (id : number) => {
		// 如果id=0，是发起审批状态
		if (id === 0) {
			status.value = 0;
			const approvalConfigdata = JSON.parse(localStorage.getItem("appConfigStr") || '{}');

			const recursionFunc = (data : any) => {
				const _approvalProcessList : any[] = [];
				const repeatConfig = (x : number, row : any) => {
					const processData = reactive<any>({
						type: row.type,
						approvalType: row.examineMode === 1 ? 0 : 1,
						nodeName: row.nodeName,
						node: [],
						checked: true,
						data: row
					});

					if (row.settype === 7) {
						processData.node.push({ name: `${row.examineEndDirectorLevel}级主管` });
					} else {
						processData.node = row.nodeUserList;
					}

					_approvalProcessList.push(processData);

					if (row.childNode) {
						repeatConfig(x + 1, row.childNode);
					}
				};

				if (data && data.nodeConfig) {
					data.nodeConfig.childNode && repeatConfig(0, data.nodeConfig.childNode);
				}
				return _approvalProcessList;
			};

			let approvalProcessListData = recursionFunc(approvalConfigdata) as any;
			let newApprovalProcessList = ref<any>([]);

			if (approveStr.value) {
				newApprovalProcessList.value.push(...recursionFunc(JSON.parse(approveStr.value)));
			}

			for (const ind in approvalProcessListData) {
				let i = ind as any;
				let w = 0;
				for (const j in newApprovalProcessList.value) {
					if (approvalProcessListData.value[i].nodeName === newApprovalProcessList.value[j].nodeName) {
						w = 1;
						approvalProcessListData.value[i].checked = true;

						for (const m in approvalProcessListData.value[i].node) {
							let v = 0;
							for (const n in newApprovalProcessList.value[j].node) {
								if (approvalProcessListData.value[i].node[m].name === newApprovalProcessList.value[j].node[n].name) {
									v = 1;
									approvalProcessListData.value[i].node[m].unJoin = false;
								}
							}
							if (!v) {
								approvalProcessListData.value[i].node[m].unJoin = true;
							}
						}
					}
				}

				if (!w) {
					if (newApprovalProcessList.value.length) {
						approvalProcessListData.value[i].checked = false;
					} else {
						for (const m in approvalProcessListData.value[i].node) {
							approvalProcessListData.value[i].node[m].unJoin = true;
						}
					}
				}
			}

			approvalProcessList.value = approvalProcessListData;
		}
	};

	const previewItemImage = (imgs : string, index : number) => {
		const array = imgs.split(',');
		const newImgArr = array.map(item => processImageUrl(item));
		uni.previewImage({
			cancel: "取消",
			urls: newImgArr,
		})
		// @ts-ignore
		// plus.nativeUI.previewImage(newImgArr, {
		// 	current: index,
		// 	loop: true,
		// 	onLongPress: (e : any) => {
		// 		// @ts-ignore
		// 		plus.nativeUI.actionSheet({
		// 			cancel: "取消",
		// 			buttons: [{ title: "保存到手机" }]
		// 		}, (event : any) => {
		// 			if (event.index > 0) {
		// 				saveImgToLocal(e.url);
		// 			}
		// 		});
		// 	}
		// });
	};

	const saveImgToLocal = (url : string) => {
		uni.downloadFile({
			url,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							// @ts-ignore
							plus.nativeUI.toast("已保存到相册", {
								icon: imageForm.value.success
							});
							uni.removeSavedFile({
								filePath: res.tempFilePath
							});
						},
						fail: () => {
							// @ts-ignore
							plus.nativeUI.toast("图片保存失败，请检查权限");
							uni.removeSavedFile({
								filePath: res.tempFilePath
							});
						}
					});
				}
			}
		});
	};

	const getApprovalTagImg = (row : ApprovalRowNode) => {
		if (row.node.length === 1) {
			switch (row.node[0].Approve) {
				case 0:
					return imageForm.value.doing;
				case 1:
					return imageForm.value.success;
				case 2:
					return imageForm.value.fail;
				default:
					return '';
			}
		} else {
			let imgstr = '';
			let z = 0;

			for (const i in row.node) {
				if (row.node[i].Approve === 1) {
					z++;
				}
				if (row.node[i].Approve === 2) {
					imgstr = imageForm.value.fail;
					break;
				}
			}

			if (imgstr) return imgstr;

			if (z === 0) {
				imgstr = imageForm.value.doing;
			} else {
				imgstr = row.node.length === z
					? imageForm.value.success
					: imageForm.value.doing;
			}

			return imgstr;
		}
	};

	const getApprovalText = (row : ApprovalRowNode) => {
		if (row.type === 1) {
			return row.node[0].Approve === 0 ? '未抄送' : '已抄送';
		} else {
			if (row.node.length === 1) {
				switch (row.node[0].Approve) {
					case 0:
						return '审批中';
					case 1:
						return '已同意';
					case 2:
						return '已拒绝';
					default:
						return '';
				}
			} else {
				let str = '';
				let z = 0;

				for (const i in row.node) {
					if (row.node[i].Approve === 1) {
						z++;
					}
					if (row.node[i].Approve === 2) {
						str = '已拒绝';
						break;
					}
				}

				if (str) return str;

				if (z === 0) {
					str = '审批中';
				} else {
					str = row.node.length === z ? '已同意' : `${z}人同意`;
				}

				return str;
			}
		}
	};

	const cutStr = (str : string) => {
		return str ? str.substring(str.length - 2) : '';
	};

	const checkIsSingle = (row : ApprovalRowNode) => {
		for (const i in row.node) {
			if (row.node[i].CurrentApprovalIDs.length > 1) {
				return false;
			}
		}
		return true;
	};

	const initPageData = (id : string) => {
		const obj2 = {
			P_PKValue: id,
			P_TableName: props.option.globalData?.physicalTableName || ''
		};

		request({
			url: 'Select_FlowLog1',
			method: 'POST',
			data: obj2,
			success(res : any) {
				if (res.data.ds.length && res.data.ds[res.data.ds.length - 1].Approve === 1) {
					finalResult.value = 1;
				}

				const data : string[] = [];
				// 处理审批人ID转姓名
				for (const i in res.data.ds) {
					res.data.ds[i].CurrentApprovalIDs = res.data.ds[i].CurrentApprovalIDs
						.replace(/^,+/, "").replace(/,+$/, "").split(',');

					for (const c in res.data.ds[i].CurrentApprovalIDs) {
						const row = personMap.get(+res.data.ds[i].CurrentApprovalIDs[c]) || null;
						if (row) {
							res.data.ds[i].CurrentApprovalIDs[c] = row.EmplName;
						}
					}

					if (!data.includes(res.data.ds[i].AuditID)) {
						data.push(res.data.ds[i].AuditID);
					}
				}

				const approvalListData : ApprovalListRow[] = [];
				for (const n in data) {
					const approvalNodeList : ApprovalRowNode[] = [];
					let level = 0;
					let finLevel = 0;

					for (const i in res.data.ds) {
						if (data[n] === res.data.ds[i].AuditID) {
							if (res.data.ds[i].Approve === 0 && !level) {
								level = res.data.ds[i].ApprovalSort;
							}

							if (res.data.ds[i].Approve === 1 && i === +(res.data.ds.length - 1)) {
								level = res.data.ds[i].ApprovalSort;
							}

							if (res.data.ds[i].Approve === 2 && !finLevel) {
								finLevel = res.data.ds[i].ApprovalSort;
							}

							if (res.data.ds[i].Approve === 2 && n === +(data.length - 1)) {
								finalResult.value = 2;
							}

							let x = 0;
							for (const j in approvalNodeList) {
								if (approvalNodeList[j].index === res.data.ds[i].ApprovalSort) {
									x = 1;
									approvalNodeList[j].node.push(res.data.ds[i]);
								}
							}

							if (!x) {
								approvalNodeList.push({
									index: res.data.ds[i].ApprovalSort,
									type: res.data.ds[i].FlowType,
									department: res.data.ds[i].ApprovalName,
									node: [res.data.ds[i]],
									showMore: false
								});
							}
						}
					}

					approvalListData.push({
						level: finLevel ? (finLevel - 1) : (level - 1),
						approvalNodeList
					});
				}

				approvalList.value = approvalListData;
			}
		});

	};

	const getStrConfigData = () => {
		// @ts-ignore
		const approvalConfigdata = JSON.parse(localStorage.getItem("appConfigStr") || '{}');
		let childNodeList : any = null;

		for (let i = approvalProcessList.value.length - 1; i >= 0; i--) {
			if (approvalProcessList.value[i].checked) {
				approvalProcessList.value[i].data.childNode = JSON.parse(JSON.stringify(childNodeList));
				childNodeList = approvalProcessList.value[i].data;
				const userList : any[] = [];

				for (const j in approvalProcessList.value[i].node) {
					if (!approvalProcessList.value[i].node[j].unJoin) {
						userList.push(approvalProcessList.value[i].node[j]);
					}
				}

				childNodeList.nodeUserList = userList;
			}
		}

		const newApprovalConfigdata = JSON.parse(JSON.stringify(approvalConfigdata));
		newApprovalConfigdata.nodeConfig.childNode = childNodeList;
		return JSON.stringify(newApprovalConfigdata);
	};

	// 预先构建映射（只需要执行一次）
	const personMap = new Map();
	// 生命周期
	onMounted(() => {
		setTimeout(() => {
			request({
				url: 'getCkUserList',
				method: 'GET',
				data: {},
				success(res : any) {
					personList.value = res.data.ds;

					for (const person of res.data.ds) {
						console.log(person);
						personMap.set(person["UserID"], person);
					}


					if (props.option.keyValue) {
						status.value = props.option.Status;
						initPageData(props.option.keyValue);
					}
				}
			});
		}, 200);
	});
</script>

<style lang="scss">
	/* 保持原有样式不变 */
	.m-approveList {
		height: 100%;
	}

	.BtnBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		position: fixed;
		top: 50%;
		left: 0%;
		width: 100%;
		opacity: 0.7;
	}

	.part {
		padding: 15px 15px 0 15px;
	}

	.part .pf {
		border-radius: 6px;
		box-shadow: 0px 1px 5px rgb(200, 198, 198);
		background-color: #fff;
		overflow: hidden;
	}

	.textarea {
		display: block;
	}

	.label {
		padding: 10px 16px;
	}

	.ap-f {
		border-bottom: 1px solid #f7f7f7;
	}

	.f-r {
		/* padding: 17px 0; */
	}

	.mark {
		padding: 17px 15px;
	}

	.mark1 {
		padding: 17px 5px 17px 15px;
		position: relative;
	}

	.f-sub {
		color: #969799;
		font-size: 26rpx;
		margin-top: 4px;
	}

	.line {
		position: relative;
		width: 30px;
	}

	.line1 {
		width: 60px;
	}

	.line-sq {
		display: inline-block;
		width: 11px;
		height: 11px;
		border-radius: 6px;
		background: #d6d6d6;
		position: absolute;
		left: 0;
		top: 12px;
	}

	.line-li {
		display: inline-block;
		width: 1px;
		background: #d6d6d6;
		position: absolute;
		left: 5px;
		top: -17px;
		bottom: -17px;
	}

	.line-li1 {
		display: inline-block;
		background: #d6d6d6;
		position: absolute;
		top: 52px;
		left: 35px;
		width: 3px;
		bottom: 10px;
	}

	.pd {
		padding: 16px 0;
	}

	.ap-r {
		text-align: right;
		padding-right: 10px;
		/* margin: -8px 0; */
		padding-top: 10px;
	}

	.ap-d {
		text-align: right;
		padding-right: 10px;
		color: #ccccce;
		font-size: 26rpx;
		float: right;
		padding-top: 3px;
	}

	.img {
		width: 34px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background-color: #3396fb;
		border-radius: 6px;
		margin: 0 auto;
		position: relative;
		user-select: none;
	}

	.img1 {
		width: 44px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		background-color: #3396fb;
		border-radius: 6px;
		position: relative;
		user-select: none;
	}

	.dis-ib {
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		min-width: 40px;
	}

	.dis2-ib {
		display: inline-block;
		vertical-align: middle;
		padding-bottom: 3px;
		text-align: center;
	}

	.dis3-ib {
		display: inline-block;
		margin: 0 6px;
		color: #969799;
		vertical-align: top;
		padding-top: 7px;
		text-align: center;
	}

	.ap-n {
		padding-top: 2px;
		font-size: 26rpx;
		color: #969799;
		text-align: center;
	}

	.bottom {
		padding: 8px 15px;
	}

	.part-white {
		padding: 15px;
		background-color: #fff;
		position: relative;
	}

	.title {
		line-height: 40px;
		font-size: 36rpx;
	}

	.title-sub {
		color: #aaacac;
		font-size: 52rpx;
	}

	.ap-res {
		color: #a3a3a3;
		font-size: 30rpx;
		padding-top: 6px;
	}

	.ap-res1 {
		color: #c31616;
		font-size: 30rpx;
		padding-top: 6px;
	}

	.ap-img {
		position: absolute;
		right: 20px;
		bottom: -38px;
		width: 88px;
		opacity: 0.4;
	}

	.form-row {
		padding: 4px 16px;
	}

	.form-label {
		color: #808991;
		font-size: 26rpx;
		user-select: none;
	}

	.form-content {
		padding-top: 5px;
	}

	.npd {
		padding-top: 0;
		overflow-x: auto;
	}

	.pl {
		color: #969799;
		font-size: 32rpx;
		margin: 6px 2px 18px 0;
		min-height: 25px;
		border-bottom: 1px solid #ebedf0;
	}

	.sf {
		width: 16px;
		background: #fff;
		padding: 2px;
		border-radius: 8px;
		position: absolute;
		right: -5px;
		bottom: -2px;
	}

	.select {
		color: #3396fb;
		float: right;
		font-size: 26rpx;
		padding-top: 3px;
		vertical-align: middle;
	}

	// .select a {
	// 	vertical-align: middle;
	// }

	.select image {
		width: 16px;
		vertical-align: middle;
	}

	.hq {
		padding: 10px 10px 0 0;
	}

	.wh {
		white-space: nowrap;
		overflow-x: auto;
		padding-right: 10px;
	}

	.plpd {
		padding-bottom: 5px;
	}

	.pictitle {
		line-height: 24px;
		color: #646566;
		user-select: none;
	}

	.piccontent {
		padding-top: 10px;
		overflow: hidden;
	}

	.van-uploader__preview {
		margin-right: 15px;
	}

	.no {
		text-align: center;
		color: #808991;
		font-size: 28rpx;
	}

	.li1 {
		top: 15px;
	}

	.li2 {
		bottom: 24px;
	}

	.da-c {
		color: #c31616;
	}

	.danger .van-field__control {
		color: #c31616;
	}

	.danger .van-field__label {
		color: #808991;
	}

	.ac-1 {
		color: #03b553;
	}

	.ac-2 {
		color: #c31616;
	}

	.checkbox {
		padding: 25px 5px 10px 10px;
	}

	.jl-remark {
		padding: 5px 0;
		color: #3396fb;
	}

	.memo-l {
		border-bottom: 1px solid rgb(235, 237, 240);
		padding: 4px 0;
	}

	.memo-l:last-child {
		border-bottom: 0;
	}



	[v-cloak] {
		display: none !important;
	}

	.o-y-a {
		overflow-y: auto;
	}

	image {
		vertical-align: middle;
	}

	/* flex相关 */
	.flex-box {
		display: -webkit-flex;
		display: flex;
	}

	.flex-direction-c {
		flex-direction: column;
	}

	.flex-direction-r {
		flex-direction: row;
	}

	.flex-main {
		flex: 1;
	}
</style>